<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { reactive, watch, computed } from 'vue'
import FinanciaBarTarget from '@/components/Echart/Bar/FinanciaBarTarget.vue'
import { useDialogStore } from '@/stores/dialog'
import { useHumanStore } from '@/stores/module/human'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const dialogInfoVisible = dialogInfo.visible
const HumanStore = useHumanStore() // 创建store实例
const { getPerformancedRevenueProfit } = storeToRefs(HumanStore)

const options = computed(() => {
  return {
    name: 'GlobalDirectSalesRevenueYoYGrowth',
    xAxis: {
      type: 'category',
      data: getPerformancedRevenueProfit?.value?.sub_titles,
    },
    data: getPerformancedRevenueProfit?.value?.info,
  }
})
watch(
  () => getPerformancedRevenueProfit.value,
  () => {
    options.value.data = getPerformancedRevenueProfit.value?.info
    options.value.xAxis.data = getPerformancedRevenueProfit.value?.sub_titles
  },
  { deep: true }
)
</script>
<template>
  <card-box componentName="GlobalDirectSalesRevenueYoYGrowth">
    <template v-slot:title>
      <h1>{{ getPerformancedRevenueProfit.title }}</h1>
    </template>
    <FinanciaBarTarget
      :chartData="options"
      v-if="getPerformancedRevenueProfit?.info?.length"
    />
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
